/*
	最左边侧航导览
-------------------------------------------------------------------------------*/


<template>
<ul class="sider-l">
    <router-link 
    class="sider-l-li"
    tag="li" 
    v-for="item in list"
     :key="item.path"  
      :to='item.path'
    > 
            <!-- <span class="icon"
              xlink:href="item.icon" 
            ></span> -->
            <svg class="icon" aria-hidden="true">
                <use xlink:href="item.icon"></use>
            </svg>
           
    </router-link>
    <!-- <ul>
        <li>主页</li>
        <li>设置</li>
        <li>图表</li>
        <li>信息</li>
        <router-view></router-view>
    </ul> -->
</ul>    
</template>

<script>
import routes from '../router/routes'
export default {
    name:'sider',
    data(){
        return {
            list:routes.filter(item=>item.isNav === true )
        }
    },
    mounted(){
        console.log(this.list);
    },


}
</script>

<style lang="scss" scoped>

    .sider-l{
     	    width:61px;
            border: 1px solid black;
            background: #52514f;
            text-align: center;
            margin-right: 6px;
            &-li{
                // height: 71px;
                height: 10%;
                 border-bottom: 1px solid red;
                 line-height: 71px;
            }
    }
    .icon{
        width: 30px;
        height: 30px;
    }

  @font-face {
  font-family: 'iconfont';  /* project id 992896 */
  src: url('//at.alicdn.com/t/font_992896_cs4d86t5hwp.eot');
  src: url('//at.alicdn.com/t/font_992896_cs4d86t5hwp.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_992896_cs4d86t5hwp.woff') format('woff'),
  url('//at.alicdn.com/t/font_992896_cs4d86t5hwp.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_992896_cs4d86t5hwp.svg#iconfont') format('svg');
}
</style>

